<template>
	<div class="header" id="header">
    <span class="none">{{onRoutes}}</span>
    <div class="tophead">
      <div class="logo" @click="gopage('pc_index')">
        <img src="/static/img/icon-logo.png">
        <span>云途养护管理中心</span>
      </div>
      <div class="right">
        <div class="line admin pointer">
          <el-popover
            placement="bottom"
            width="160"
            v-model="visible">
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click="loginout">退出</el-button>
            </div>
            <div slot="reference" style="width: 80px;">{{username || 'admin'}}<i class="el-icon-user"></i></div>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="jw-menu clearfix">
      <el-menu
        :default-active="menuName"
        class="el-menu-vertical-demo">
        <el-menu-item v-for="(item,idx) in menu" :key="idx" :index="item.name" v-if="item.status == 1">
          <div @click="openmenu(item,idx)">
            <img :src="item.name== menuName ? item.active : item.icon"/>
            <span>{{item.tooltip}}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
	</div>
  
</template>

<script>
  import PCMenu from 'static/json/menu.json'
	export default {
    inject: ['reload'],
    data() {
      return {
        https: {
          menu : this.$api.common.getMenu
        },
        isIndex: false,
        menu: PCMenu,
        // menu: [],
        currentMenu: {child: []}, //当前menu对象
        visible: false,
      };
    },
    computed: {
      username(){
        let _self = this
        // _self.$store.commit("pctype",  localStorage.getItem('ms_type'))
        return localStorage.getItem('ms_username') || '123'
      },
      // 获取页面当前二级活跃路由
      onRoutes() {
        // 需要刷新的路由列表
        let _self = this
        /****
        *   判断当前人员是否有该路由权限，
        *   有则完成正常跳转
        *   没有则跳转至404界面
        ******/      
        if(!_self.$judgeMenu(_self, _self.menu) && !_self.$route.meta.isDetail) return _self.$router.replace({path: '/404'})
        if(_self.$route.meta.isDetail){
          _self.reload()
        }
				return '/' + this.$route.path.replace('/', '')
      },
			// 主菜单当前活跃项
			menuName() {
				return this.$getMenu(this)
      },
    },
    mounted(){
      let _self = this
      _self.getMenu()
    },
    methods: {
      getMenu(){
        let _self = this
        _self.currentMenu = _self.menu[0]
        let name = `/${_self.$route.name.split('_')[0]}` || '/'
        _self.$emit('getCurrent', _self.menu.filter(item=>item.name == name)[0] || {child: []})
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            // console.log(res.data)
            // _self.menu = res.data
            // let idx = _self.menu.findIndex((item)=>{
            //   return _self.menuName == item.name
            // })
            // if(idx == -1){
            //   let param = {path: _self.menu[0].child[0].name}
            //   _self.$router.replace(param)
            //   _self.currentMenu = _self.menu[0]
            // }else{
            //   _self.currentMenu = _self.menu[idx]
            // }
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.menu, {}, success)
      },
      // 一级导航菜单跳转
      openmenu(item,index) {
        let _self = this
        _self.isIndex = false
        _self.currentMenu = item
        _self.$emit('getCurrent', item)
        let param = {path: item.child[0].name}
        _self.$router.replace(param)
        _self.reload()
      },
      // 二级导航跳转
      handleClick(tab, event) {
        let _self = this
        _self.isIndex = false
        let param = {path: tab.name}
        _self.$nextTick(()=>{
          _self.$router.replace(param)
        })
      },
      loginout(){
        let _self = this
        // localStorage.removeItem('ms_username')
        // localStorage.removeItem('ms_token')
        // let param = {name: 'login'}
        // _self.$router.replace(param)
      },
      gopage(name){
        let _self = this
        _self.isIndex = true
        _self.$router.replace({name: name})
      },
    }
  }
</script>
<style scoped lang="scss">
  #header {
    position: relative;
  }
  .menu-item-item{
    padding: 10px 0;    
    .title-icon{
      font-size: 12px;
      margin: 0;
      margin-top: 3px;
      padding: 0;
      text-align: center;
      line-height: 1;
    }
  }
  .pointer{
    cursor: pointer;
  }
  .tophead {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: #000;
    height: 60px;
    line-height: 60px;
    z-index: 10;
    ::after {
      content: '';
      display: block;
      clear: both;
    }
    .logo {
      float: left;
      text-align: center;
      font-size: 14px;
      width: 180px;
      color: #fff;
      cursor: pointer;
      img {
        width: 28px;
        height: 28px;
        margin-right: 6px;
      }
      img,span {
        vertical-align: middle;
      }
    }
    .right {
      float: right;
      display: flex;
      color: #fff;
      margin: 10px 0;
      box-sizing: border-box;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      color: #adadad;
      padding-right: 10px;
      img {
        width: 20px;
        position: relative;
        top: 5px;
      }
      .admin {
        position: relative;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        i{
          font-size: 25px;
          position: absolute;
          margin-left: 10px;
          top: 5px;
        }
      }
    }
    .line {
      padding: 0 15px;
    }
  }
  .jw-menu {
    position: absolute;
    left: 0;
    top: 61px;
    bottom: 0;    
    width: 139px;
    height: 100%;
    border-right: 1px solid #d7d7d7;
    background: #fafafa;
    &::before {
      display: block;
      content: '';
      width: 1px;
      height: 100vh;
      background: #d7d7d7;
      position: absolute;
      top: -61px;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      padding: 0;
      // text-align: center;
      border-left: 3px solid #fafafa;
      color: #000;
      div {
        padding-left: 15px;
      }
      img {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    /deep/ .el-menu-item.is-active {
      // color: #ff6600;
      // background-color: #fbe2c8 !important;
      // border-left: 3px solid #ff9966;
      color: #409EFF;
      background-color: #eaeff5 !important;
      border-left: 3px solid #0c6dd2;
    }
    ul {
      background-color: initial;
      border: 0;
      li {
        padding-left: 0 !important;
        background: none !important;
      }
    }
  }
  .menu-child {
    position: absolute;
    left: 140px;
    top: 60px;
    right: 0;
    background: #fff;
    /deep/ .el-tabs__item {
      height: 50px;
      line-height: 50px;
      padding: 0 45px;
      font-size: 14px;
    }
    /deep/ .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
      padding-left: 45px;
    }
    /deep/ .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
      padding-right: 45px;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
      border: 0;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
      border-left: 0;
    }
    /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      background: #f2f2f2;
      color: #409EFF;
      position: relative;
      &::after {
        display: inline-block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 25%;
        height: 2px;
        width: 50%;
        background: #409EFF;
      }
    }
    /deep/ .el-tabs__item:hover {
      color: #409EFF;
    }
    .menu-tag {
      // height: 50px;
      /deep/ .el-breadcrumb {
        margin-top: 10px;
        margin-left: 30px;
        padding: 0 10px;
        border-left: 3px solid #409EFF;
        font-size: 13px;
      }
    }
  }
  // @media screen and (max-width:1440px) {
  //   .tophead {
  //     height: 50px;
  //     line-height: 50px;
  //     .right {
  //       height: 36px;
  //       line-height: 36px;
  //       margin: 7px 0;
  //     }
  //   }
  //   .jw-menu {
  //     top: 50px;
  //   }
  //   .menu-child {
  //     top: 50px;
  //   }
  //   .jw-menu::before {
  //     top: -50px;
  //   }
  // }
</style>
